<template>
  <div class="seller-container">
    <div class="container" v-if="seller">
      <div class="box_1">
        <div class="sell">
          <div class="title">
            <div class="name">{{ seller.name }}</div>
            <span>★★★★★</span>
            <span>月售{{ seller.sellCount }}单</span>
            <span>好评率:{{ seller.rankRate }}%</span>
          </div>
          <div class="favorite">
            <span class="icon">❤</span>
            <span class="collection">已收藏</span>
          </div>
        </div>
        <div class="line"></div>
        <div class="delivery">
          <ul>
            <li>
              <h1>起送价</h1>
              <div><span>{{ seller.minPrice }}</span><span>元</span></div>
            </li>
            <li>
              <h1>商家配送</h1>
              <div><span>{{ seller.deliveryPrice }}</span><span>元</span></div>
            </li>
            <li>
              <h1>评价配送时间</h1>
              <div><span>{{ seller.deliveryTime }}</span><span>分钟</span></div>
            </li>
          </ul>
        </div>
      </div>
      <div class="space"></div>
      <div class="box_2">
        <div class="name">公告与活动</div>
        <span class="bulletin">{{ seller.bulletin }}</span>
        <div v-if="seller.supports">
          <div v-for="item in seller.supports" :key="item.type">
            <div class="line"></div>
          <div class="info"><img src="../resource/img/decrease_2@3x.png" alt=""><span>{{ item.description }}</span></div>
          </div>
          <!-- <div class="line"></div>
          <div class="info"><img src="../resource/img/decrease_2@2x.png" alt=""><span>在线支付</span></div>
          <div class="line"></div>
          <div class="info"><img src="../resource/img/decrease_2@2x.png" alt=""><span>在线支付</span></div> -->
        </div>
      </div>
      <div class="space"></div>
      <div class="box_3">
        <div class="name">商家实景</div>
        <div class="pics">
          <div v-for="item in seller.pics" :key="item">
            <img :src="item"
            alt="">
          </div>
          <!-- <img src="http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180"
            alt="">
          <img src="http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180"
            alt="">
          <img src="http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180"
            alt=""> -->
        </div>
      </div>
      <div class="space"></div>
      <div class="box_4">
        <div class="name">商家信息</div>
        <div class="sellerinfo">
          <div v-for="item in seller.infos" :key="item">
            <div class="line"></div>
          <div class="infos"><span>{{ item }}</span></div>
          </div>
          <!-- <div class="line"></div>
          <div class="infos"><span>该商家支持开发票</span></div>
          <div class="line"></div>
          <div class="infos"><span>该商家支持开发票</span></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const ERR_OK = 0
export default {
  name: 'SellerView',
  data () {
    return {
      seller: {}
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      this.$http.get('http://localhost:8081/api/seller').then(res => {
        // console.log(res.body)
        if (!res.body.errno === ERR_OK) return
        this.seller = res.body.data
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  .seller-container {
    width: 100%;
    height: 100%;
    overflow: scroll;

    .container {
      .line {
        border-bottom: 1px solid rgba(7, 17, 27, .1);
      }

      .space {
        height: 0.32rem;
        width: 100%;
        background-color: rgba(147, 153, 159, .1);
        border-bottom: 1px solid rgba(7, 17, 27, .2);
        border-top: 1px solid rgba(7, 17, 27, .2);
      }

      .name {
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 0.4rem;
        color: rgb(7, 17, 27);
      }

      .box_1 {
        width: 100%;
        height: 3rem;
        padding: 0.3rem 0.36rem;

        .sell {
          width: 100%;
          height: 1.2rem;
          display: flex;
          justify-content: space-between;

          .title {

            span {
              display: inline-block;
              height: 0.8rem;
              line-height: 0.8rem;
              font-size: 0.3rem;
              color: rgb(77, 85, 93);
            }
          }

          .favorite {
            display: flex;
            flex-direction: column;

            .icon {
              font-size: 0.48rem;
              color: rgb(240, 20, 20);
              line-height: 0.48rem;
              text-align: center;
            }

            .collection {
              margin-top: 0.08rem;
              line-height: 0.2rem;
              font-size: 0.2rem;
              color: rgb(77, 85, 93);
            }
          }
        }

        .delivery {
          padding-top: 0.3rem;
          width: 100%;
          height: 1.2rem;

          ul {
            display: flex;
            justify-content: center;
            align-items: center;

            li {
              width: 33.3333%;
              height: 100%;
              display: flex;
              flex-direction: column;
              font-weight: normal;
              color: rgb(7, 17, 27);
              // line-height: 0.48rem;
              border-right: 1px solid rgba(7, 17, 27, .1);
              text-align: center;

              h1 {
                line-height: 0.2rem;
                font-size: 0.2rem;
                font-weight: normal;
                color: rgb(147, 153, 159);
                margin-bottom: 0.22rem;
              }

              span:first-of-type {
                display: inline-block;
                height: 0.48rem;
                line-height: 0.48rem;
                font-size: 0.48rem;
              }

              span:last-of-type {
                font-size: 0.2rem;
              }
            }

            li:last-child {
              border: none;
            }
          }
        }
      }

      .box_2 {
        padding: 0.36rem;
        padding-bottom: 0;

        .bulletin {
          display: inline-block;
          padding: 0.16rem 0.24rem 0.32rem 0.24rem;
          font-size: 0.28rem;
          font-weight: 200;
          color: rgb(240, 20, 20);
          line-height: 0.48rem;
        }

        .info {
          padding: 0.20rem 0.24rem;

          img {
            display: inline-block;
            width: 0.48rem;
            height: 0.48rem;
            vertical-align: middle;
          }

          span {
            padding-left: 0.12rem;
            display: inline-block;
            font-size: 0.28rem;
            font-weight: 200;
            color: rgb(7, 17, 27);
            height: 0.48rem;
            line-height: 0.48rem;
            vertical-align: middle;
          }
        }
      }

      .box_3 {
        padding: 0.36rem;
        width: 100%;

        .pics {
          margin-top: 0.24rem;
          width: 100%;
          height: 1.8rem;
          overflow-x: scroll;
          overflow-y: hidden;
          white-space: nowrap;
          display: flex;
          align-items: center;
          div {
            img {
            width: 1.8rem;
            height: 1.8rem;
            margin-left: 0.12rem;
          }
          }
        }
      }

      .box_4 {
        padding: 0.36rem;
        padding-bottom: 0;

        .sellerinfo {
          padding-top: 0.24rem;
          .infos {
            padding: 0.20rem 0.24rem;

            span {
              display: inline-block;
              height: 0.4rem;
              line-height: 0.4rem;
              font-size: 0.28rem;
              font-weight: 200;
              color: rgb(7, 17, 27);
            }
          }
        }

      }
    }
  }

</style>
